<template>
   
           <div class="baseList">
             <div class="tableBoxs">
   
       <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
       <t-table
             :row-key="index" 
             :data="data" 
             :columns="COLUMNS" 
             vertical-align="middle"
             :hover="hover"
             :loading="dataLoading"
             tabel-content-width="100%"
             table-layout="fixed"
       >
       <!-- 序号 -->
       <template #rowIndex="{ rowIndex }">{{ (pagination.pageNum -1)* pagination.pageSize + (rowIndex + 1) }}</template>
         <!-- 图片预览及展示 -->
         <template #image="{ row }">
           <div class="tdesign-demo-image-viewer__base">
               <t-image-viewer :images="[row.image]">
                   <template #trigger="{ open }">
                       <div class="tdesign-demo-image-viewer__ui-image">
                           <img
                                alt="test"
                                :src="row.image"
                                class="tdesign-demo-image-viewer__ui-image--img"
                                />
                           <div
                                class="tdesign-demo-image-viewer__ui-image--hover"
                                @click="open"
                                >
                               <span><BrowseIcon size="1.4em" /> 预览</span>
                           </div>
                       </div>
                   </template>
               </t-image-viewer>
           </div>  
       </template>
       <!-- 设置小数点2位 -->
       <template #price="{ row }">{{ row.price.toFixed(2) }}</template>
       <!-- 操作栏 -->
       <template #op="{ row }">
         <div class="operateCon">
           <a 
           class="btn-dl"
           >删除</a>
           <a 
           class="font-bt"
           >编辑</a>
           <a 
           class="delete"
           >禁用</a>
         </div>
       </template>
   
       </t-table>
         <!-- 分页 -->
         <t-pagination
             v-if="total > 3"
             v-model="pagination.pageNum"
             v-model:pageSize="pagination.pageSize"
             :total="total"
             @change="onPageChange"
           />
     </div>
           </div>
       
   </template>
   
   <script setup lang="jsx">
   
   //import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon } from 'tdesign-icons-vue-next'
   import { COLUMNS } from '../constants.ts'
 /* 接收父组件传递过来的属性 */
 const props=defineProps({
    data:{
        type:Object,//定义类型
        default:()=>{}//给默认初始化值，为空
    },
    total:Number,
    pagination:{
        type:Object,//定义类型
        default:()=>{}//给默认初始化值，为空
    },
    dataLoading:{
        type:Boolean,
        default:false
    }
  })
/* 定义接收父组件传递过来的方法 */
const emit=defineEmits(['onPageChange'])
/* 执行单击触发翻页事件 */
const onPageChange=(val)=>{
    emit('onPageChange',val)
}
   
   
   </script>